<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>首页</title>
</head>
<body>
<div id="appl">
	<input type="button" value="增加" onclick="location.href='addgoodinfos.html'">
	<table>
		<thead>
		<tr>
			<td>
				id
			</td>
			<td>
				name
			</td>
			<td>
				oldprice
			</td>
			<td>
				newprice
			</td>
			<td>
				color
			</td>
			<td>
				editom
			</td>
			<td>
				count
			</td>
			<td>
				phton
			</td>
			<td>
				操作
			</td>
		</tr>
		</thead>
		<tbody>
		<tr v-for="(goodinfo, index) in goodinfos" :key="goodinfo.gid">
			<td>
				{{goodinfo.gid}}
			</td>
			<td>
				{{goodinfo.gname}}
			</td>
			<td>
				{{goodinfo.goldprice}}
			</td>
			<td>
				{{goodinfo.newprice}}
			</td>
			<td>
				{{goodinfo.gcolor}}
			</td>
			<td>
				{{goodinfo.gedition}}
			</td>
			<td>
				{{goodinfo.gcount}}
			</td>
			<td>
				<img :src="'http://localhost/huawei/img/'+goodinfo.gphoto" style="height: 70px">
			</td>
			<td>
				<a href="javascript:;" @click="del(goodinfo.gid)">删除</a>
			</td>
		</tr>
		</tbody>
	</table>
</div>

</body>
</html>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script>
    var app = new Vue({
        el: "#appl",
        data: {
            goodinfos: {}
        },
        methods: {
            // 双向绑定
            findAll(){ // 查找所有用户
                var _that = this;
                axios.get("http://localhost/huawei/goodinfos/findAllGoodinfos").then(res=>{
                    console.log(res.data);
                    // 将数据添加到列表
                    _that.goodinfos = res.data.records;
                });
            },
            del(id){
                // alert(id)
                if (window.confirm("确定要删除该商品信息嘛？")){
                    axios.get("http://localhost/huawei/goodinfos/deletGoodinfosById?id="+id).then(res=>{
						if (res.data.status){
						    alert(res.data.msg+", 点击确定刷新数据")
							location.href=""
						}else {
						    alert(res.data.msg)
						}
                    })
                }

            }
        },
	    created(){
            this.findAll();
	    }
    });
</script>